<template>
    <article class="item">
        <header class="name">
            <h1>{{item.name}}</h1>
        </header>

        <!-- <nav class="more">
             <a @click="notSupport">查看详情</a>
        </nav> -->

        <section class="img">
            <img :src="imageUrl">
        </section>

        <section class="content">
            <div class="address">
                <i class="el-icon-location">{{item.address}}</i>
            </div>
            <div class="phone">
                <i class="el-icon-phone-outline">{{item.phone}}</i>
            </div>
            <div class="date">
                <i class="el-icon-date">{{item.date}}</i>
            </div>
            <div class="time">
                <i class="el-icon-time">{{item.startTime}}-{{item.endTime}}</i>
            </div>
        </section>

        <aside class="chart">
            <div class="qrcode">
                <vue-qr :logoSrc="imageUrl" :text="qrText()" :size="130"></vue-qr>
            </div>
        </aside>

        <footer>
            <el-button type="primary" round size="mini" @click="downloadQR()"><i class="el-icon-download"></i></el-button>
        </footer>

    </article>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name: "Historyitem",
    props: {
        index: Number,
        item: Object
    },
    data(){
        return {
            imageUrl: require("@/assets/doctor/history.jpg"),
            // item: {
            //     date: "2022-05-26",
            //     name: "天津医院",
            //     address: "天津大学体育场",
            //     phone: "19960741644",
            //     startTime: "08:30:00",
            //     endTime: "11:30:00",
            //     maxNumber: 3,
            //     currentNumber: 3,
            // },
        }
    },
    computed: {
    },
    methods: {
        qrText: function() {
            return "机构名: " + this.item.name
                    + "\n地址: " + this.item.address
                    + "\n机构联系电话: " + this.item.phone
                    + "\n日期: " + this.item.date
                    + "\n时间: " + this.item.startTime  + "-" + this.item.endTime
                    + "\n预约时间段编号: " + this.item.alid
            ;
        },
        downloadQR: function(){
            var oQrcode = document.querySelectorAll('.qrcode img');
            var url = oQrcode[this.index].src
            var a = document.createElement('a')
            var event = new MouseEvent('click')
            // 下载图名字
            a.download = this.item.name + this.item.date;
            a.href = url;
            // 合成函数，执行下载
            a.dispatchEvent(event)
        },
        notSupport: function(){
            Message.error('还没有完成');
        },
    },
    created() {
        // console.log(this.item);
    }

}
</script>

<style scoped lang="scss">


article {

    position: relative;
    display: block; // 适应浏览器
    margin: auto;
    padding: 0 0 5px 0;
    width: 600px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

    &:focus {
        transform: scale(1.4);
    }

    border-radius: 25px;
    background-color: #DCDFE6;

    animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

header {
    // background-color: red;
    margin: 0 0 0 0 ;
    height: 20%;
    h1 {
        font-size: 21px;
        line-height: 50px;
        margin: 0 0 0 10%;
        position: relative;
        z-index: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50%;
        color: #414141;
    }

    button {
        border-radius: 20px;
        border: 1px solid #8bc9da;
        background-color: #67C23A;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        padding: 5px 20px;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 0.1s ease-in;

        &:active {
            transform: scale(0.9);
        }
    }

    .top-right {
        position: absolute;
        top: 2px;
        right: calc(50% - 300px + 5px);
        width: 150px;
    }

}

nav {
    // background-color: green;
    margin: 0 0 0 0 ;
    height: 10%;
}

section {
    // background-color:palevioletred;
    margin: 0 0 0 0 ;
    display: inline-block;
    vertical-align: top;
    width: 30%;
    height: 100px;

    img {
        position: relative;
        top: -10px;
        left: 50px;
        width: 100px;
        height: 100px;
        // object-fit: cover;
        border: 5px solid #409EFF;
        border-radius: 10px;
    }

    .content {
        width: 40%;
    }
}

aside {
    // background-color: wheat;
    margin: 0 0 0 0 ;
    height: 100px;
    width: 30%;
    float: right;

    .qrcode {
        position: relative;
        top: -40px;
        right: 20px;
    }
}

footer {
    // background-color: aqua;
    margin: 0 0 0 0 ;
    text-align: left;

    position: absolute;
    top: 20px;
    right: calc(50% - 300px - 150px);
    width: 150px;

    display: none;
}


article:hover {

    section {
        transform: scale(0.9);
    }

    footer {
        display: inline-block;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
}

@keyframes tilt-in-top-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}


@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


</style>